<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <script type="text/javascript">
        require(["../src/animation/animation"], function(Animation){

            var animation = new Animation,
                target = (function(){
                    var properties = {
                        x : 0,
                        y : 0
                    }
                    return {
                        get : function(key){
                            return properties[key];
                        },
                        set : function(key, value){
                            properties[key] = value;
                        }
                    }
                })()

            animation.start();

            var getter = function(target, key){
                return target.get(key);
            }
            var setter = function(target, key, value){
                target.set(key, value);
            }
            animation.animate( target, getter, setter )
                    .when(1000, {
                        x : 10
                    })
                    .when(2000, {
                        y : 20
                    })
                    .done(function(){
                        target.set("x", 0)
                        target.set("y", 0)
                    })
                    .start()
        })
    </script>
    <div id="Main" style="width:600px;height:400px;"></div>
</body>
</html>